<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/common/_includes.jsp" %>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<link rel="stylesheet" href="/static/vendor/upload/css/jquery.fileupload.css" type="text/css" />
<div class="ui grid">
	<div class="row">
		<div class="column">
			<div class="ui two column grid">
				<div class="three wide column">
					<jsp:include page="/WEB-INF/jsp/common/_sidebar.jsp">
						<jsp:param name="index" value="4"/>
					</jsp:include>
				</div>
				<div id="container" class="thirteen wide column">
					<div class="alert alert-success w200 center-block text-center " style="display: none; " role="alert"></div>
					<ol class="breadcrumb">
						<li><a href="/">后台管理</a></li>
						<li><a href="/video/list">视频列表</a></li>
						<li class="active">上传视频</li>
					</ol>
					<form id="videoForm" class="form-horizontal" method="post" action="">
						<input type="hidden" id="id" name="id" value="${video.id }">
						<div class="form-group">
							<label class="col-sm-2 control-label">视频标题</label>
							<div class="col-sm-5">
								<input type="text" name="title" value="${video.title }" class="form-control" placeholder="请输入视频标题">
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" id="videoUrl" name="videoUrl" value="${video.videoUrl }">
							<label class="col-sm-2 control-label">视频文件</label>
							<div class="col-sm-3">
								<p class="form-control-static">视频文件类型【<strong>.flv/.mp4】</strong></p>
							</div>
							<div class="col-sm-2">
								<span class="btn btn-success btn-sm btn-block fileinput-button btn-video" data-loading-text="Loading...">
									<i class="glyphicon glyphicon-plus"></i>
									<span>上传视频</span>
									<input id="videoFileupload" type="file" name="attachFile" data-url="/img/upload" multiple>
								</span>
							</div>
						</div>
						<div class="form-group" id="videoFileBox" style="display: nkone">
							<div class="col-sm-offset-2 col-sm-5">
								<div class="fileName"></div>
								<div class="progress mb0">
									<div class="progress-bar" style="width: 0%;">0%</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"> </label>
							<div class="col-sm-5">
								<label class="error">注：视频大小请不要超过500M</label>
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" id="imgUrl" name="imgUrl" value="">
							<label class="col-sm-2 control-label">缩略图</label>
							<div class="col-sm-3">
								<img id="thumbnail" src="${video.imgUrl!=null?video.imgUrl:'http://placehold.it/170x170'}" width="170px" height="170px">
							</div>
							<div class="col-sm-2">
								<span class="btn btn-success btn-sm btn-block fileinput-button btn-img">
									<i class="glyphicon glyphicon-plus"></i>
									<span>上传图片</span>
									<input id="imgFileupload" type="file" name="attachFile" data-url="/img/upload" multiple>
								</span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">所属站点</label>
							<div class="col-sm-5">
								<select class="form-control" id="siteId" name="siteId">
									<option value="" selected="selected">请选择所属站点</option>
									<option value="1" <c:if test="${video.siteId==1 }">selected</c:if>>财之道</option>
									<option value="2" <c:if test="${video.siteId==2 }">selected</c:if>>中财讯</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">上传类型</label>
							<div class="col-sm-5">
								<select class="form-control" id="type" name="type">
									<option value="" selected="selected">请选择上传类型</option>
									<option value="1" <c:if test="${video.type==1 }">selected</c:if>>前端上传</option>
									<option value="2" <c:if test="${video.type==2 }">selected</c:if>>后台上传</option>
									<option value="3" <c:if test="${video.type==3 }">selected</c:if>>新三板视频</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-sm-2 col-sm-offset-2">
								<button class="btn btn-success btn-sm">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<jsp:include page="/WEB-INF/jsp/common/_foot.jsp"></jsp:include>
<script src="/static/vendor/upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/vendor/upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/static/vendor/jquery.validate/jquery.validate.js"></script>
<script src="/static/vendor/upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">
	//初始化上传组件
	var videoUploader = $('#videoFileupload').fileupload({
		dataType : 'json',
		maxFileSize: 500*1024*1024,
		formData:{uploadType:'video'},
		progressall: function (e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$('.progress-bar').css('width', progress + '%').text(progress + '%');
		},
		done : function(e, data) {
			if (data.result.status == 'ok') {
				info('视频上传成功！');
				$('#videoUrl').val(data.result.url);
			}else{
				warn(data.result.msg);
			}
		}
	}).bind('fileuploadsend', function (e, data) {
		if(data.total > 500 * 1024 * 1024){
			warn('视频大小请不要超过500M');
			return false;
		}
		$('#videoFileBox').show();
		$('#videoFileBox').find('.fileName').text(data.files[0].name);
		$('#videoFileBox').find('.progress-bar').css('width',  '0%').text('0%');
	});
	
	$('#imgFileupload').fileupload({
		dataType : 'json',
		formData:{uploadType:'image'},
		done : function(e, data) {
			if (data.result.status == 'ok') {
				$('#thumbnail').attr('src', data.result.url);
				$('#imgUrl').val(data.result.url);
			}
		}
	});
	
	$('#videoForm').validate({
		rules: {
			title: {
				required: true,
				minlength: 4
			},
			siteId: {
				required: true
			},
			type: {
				required: true
			}
		},
		messages: {
			title: {
				required: "请输入视频标题",
				minlength: "标题不能少于4个字符"
			},
			siteId: {
				required: "请选择所属站点"
			},
			type: {
				required: "请选择上传类型"
			}
		}
	});
</script>